<template>
  <phonePopup v-model:show-popup="phonePopupShwo">
    <div class="task-box">
      <div class="phone-body-heard">任务</div>
      <div class="phone-body-center">
        <div
          v-for="items in taskList"
          :key="items.taskRecordId"
          class="phone-body-center-items"
        >
          <div
            class="phone-body-center-items-heard"
            :style="{ background: items.taskType == 2 ? '#F6A47E' : '' }"
          >
            {{ taskTypeEnum[items.taskType] }}
          </div>
          <div class="task-content">{{ items.name }}</div>
          <div class="task-award">
            <!-- {{ items.goldCoins ? "金币+" + items.goldCoins : "" }}
            {{ items.experience ? "经验+" + items.experience : "" }} -->
          </div>
          <div
            :class="{
              'task-button-active': items.taskStatus != 3,
              'task-button-out': items.taskStatus == 3,
            }"
            @click="taskClick(items)"
          >
            {{ taskStatusEnum[items.taskStatus] }}
          </div>
          <img
            :src="items.type != 3 ? taskEveryday : taskTimeLimit"
            class="items-image"
          />
        </div>
      </div>
      <div class="phone-body-bottom">
        <div class="phone-body-bottom-items" @click="allTaskClick">
          <img src="@/assets/image/task-all.png" class="task-image" />
          <div class="task-text">全部任务</div>
        </div>
        <div class="phone-body-bottom-items" @click="dailyTaskClick">
          <img src="@/assets/image/task-everyday.png" class="task-image" />
          <div class="task-text">日常任务</div>
        </div>
        <div class="phone-body-bottom-items" @click="timeLimitTaskClick">
          <img src="@/assets/image/task-time-limit.png" class="task-image" />
          <div class="task-text">限时任务</div>
        </div>
      </div>
    </div>
  </phonePopup>
</template>
<script setup lang="ts">
import phonePopup from "@/components/phonePopup.vue";
import taskEveryday from "@/assets/image/items-everyday.png";
import taskTimeLimit from "@/assets/image/items-time-limit.png";
import { computed, ref, watch } from "vue";
import { getTaskList } from "@/api/common";
import { useMainStore } from "@/store";
enum taskTypeEnum {
  日常任务 = 1,
  限时任务 = 2,
  定制任务 = 3,
}
enum taskStatusEnum {
  去完成 = 1,
  待领奖 = 2,
  已领取 = 3,
}
interface taskListType {
  /*任务记录id */
  taskRecordId: number;
  /*学生id */
  studentId: number;
  /*任务id */
  taskId: number;
  /*任务类型*/
  taskType: number;
  /*附属任务id */
  subTaskId: number;
  /*领取任务时间 */
  claimTaskTime: Record<string, unknown>;
  /*完成任务时间 */
  completeTaskTime: Record<string, unknown>;
  /*领取奖励时间 */
  claimRewardTime: Record<string, unknown>;
  /*完成状态（1去完成，2待领奖，3已领取） */
  taskStatus: number;
  /*类型(1普通任务，2签到，3共育） */
  type: number;
  /*父任务id */
  parentId: number;
  /*任务图片 */
  images: string;
  /*任务名称 */
  name: string;
  /*任务介绍 */
  remark: string;
  /*开始时间 */
  taskBeginTime: Record<string, unknown>;
  /*结束时间 */
  taskEndTime: Record<string, unknown>;
  /*持续天数 */
  durationDays: number;
  /*是否轮询 */
  polling: number;
  /*应用学段集合 */
  stageList: Record<string, unknown>[];
  /* */
  stage: string;
  /*互动逻辑上级*/
  interactionParent: number;
  /*互动逻辑下级*/
  interactionSon: number;
  /*奖励经验 */
  experience: number;
  /*奖励金币 */
  goldCoins: number;
  /*H5页面地址 */
  pageAddress: string;
  /*上架状态 */
  disabledFlag: boolean;
  /*排序 */
  sort: number;
}
const emit = defineEmits(["child-event"]);
const phonePopupShwo = defineModel<boolean>("taskShow");
const taskList = ref<taskListType[]>();
const allTaskList = ref<taskListType[]>();
const mainStore = useMainStore();
const refreshTask = computed(() => mainStore.refreshTask);
watch(refreshTask, (newValue) => {
  if (newValue) {
    getTaskData();
    mainStore.refreshTask = false;
  }
});
function getTaskData() {
  const studentId = mainStore.studentInfo?.studentId;
  getTaskList(studentId).then((res) => {
    taskList.value = res.data;
    allTaskList.value = res.data;
  });
}
watch(phonePopupShwo, (newValue) => {
  if (newValue) {
    getTaskData();
  }
});

function taskClick(items: taskListType) {
  if (items.taskStatus == 3) return;
  emit("child-event", items.type, items.taskId);
}

function allTaskClick() {
  taskList.value = allTaskList.value;
}
function dailyTaskClick() {
  taskList.value = allTaskList.value?.filter((item) => item.taskType == 1);
}
function timeLimitTaskClick() {
  taskList.value = allTaskList.value?.filter((item) => item.taskType == 2);
}
</script>
<style lang="scss" scoped>
.task-box {
  width: 100%;
  height: 100%;
  position: relative;
  .phone-body-heard {
    width: 100%;
    height: 42px;
    border-radius: 10px 10px 0px 0px;
    background: #f6c67e;
    font-family: Source Han Sans;
    font-size: 18px;
    font-weight: bold;
    line-height: 32px;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .phone-body-center {
    width: 100%;
    height: calc(425 / 524 * 100%);
    background: #f6f6f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    .phone-body-center-items {
      width: 266px;
      height: 75px;
      border-radius: 0px 10px 10px 10px;
      opacity: 1;
      background: #fef2da;
      box-sizing: border-box;
      border: 1px solid #eeb75b;
      position: relative;
      margin: 20px 0 0 0;
      .task-button-out {
        width: 64px;
        height: 34px;
        position: absolute;
        top: 21px;
        right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Source Han Sans;
        font-size: 14px;
        font-weight: bold;
        line-height: 22px;
        letter-spacing: 0px;
        font-variation-settings: "opsz" auto;
        color: #999999;
      }
      .task-button-active {
        width: 64px;
        height: 34px;
        position: absolute;
        top: 21px;
        right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Source Han Sans;
        font-size: 14px;
        font-weight: bold;
        line-height: 22px;
        letter-spacing: 0px;
        font-variation-settings: "opsz" auto;
        color: #ffffff;
        opacity: 1;
        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        opacity: 1;
        background: linear-gradient(90deg, #ffc500 0%, #ffb200 100%);
        box-shadow: inset -1px -1px 2px 0px #d89f37,
          inset 1px 1px 2px 0px rgba(255, 255, 255, 0.3);
      }
      .task-award {
        font-family: Source Han Sans;
        font-size: 12px;
        font-weight: 350;
        line-height: 20px;
        letter-spacing: 0px;
        color: #e1803b;
        position: absolute;
        top: 39px;
        left: 65px;
      }
      .task-content {
        position: absolute;
        top: 13px;
        left: 65px;
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: bold;
        line-height: 28px;
        letter-spacing: 0px;
        font-variation-settings: "opsz" auto;
        color: #e1803b;
      }
      .items-image {
        position: absolute;
        top: 24px;
        left: 20px;
        width: 43px;
        height: 43px;
        margin: -6px;
      }
      .phone-body-center-items-heard {
        position: absolute;
        top: -11px;
        left: -1px;
        width: 64px;
        height: 22px;
        border-radius: 100px;
        opacity: 1;
        background: #f6c67e;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Source Han Sans;
        font-size: 12px;
        font-weight: bold;
        line-height: 20px;
        letter-spacing: 0px;
        font-variation-settings: "opsz" auto;
        color: #ffffff;
      }
    }
  }
  .phone-body-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 57px;
    border-radius: 0px 0px 10px 10px;
    background: #fddbaa;
    display: flex;
    justify-content: space-around;
    .phone-body-bottom-items {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-family: Source Han Sans;
      font-size: 10px;
      font-weight: 500;
      line-height: 22px;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      color: #e1803b;
      .task-text {
        width: 40px;
        height: 20px;
        white-space: nowrap;
      }
      .task-image {
        margin: -10px;
        width: 50px;
        height: 50px;
      }
    }
  }
}
</style>
